<template>
  <p-modal
    v-model="visible"
    :title="title"
    :width="1000"
    :dialog-style="{ top: '40px' }"
    :mask-closable="false"
    :get-container="getContainer"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div>
      <p-form-model :model="form" :rules="rulesComputed" layout="inline">
        <p-form-model-item label="机种编号">
          <p-input v-model="form.modelNumber" placeholder="请输入" />
        </p-form-model-item>
        <p-form-model-item label="机种名称">
          <p-input v-model="form.modelName" placeholder="请输入" />
        </p-form-model-item>
        <p-form-model-item label="销售组织">
          <SelectOrg v-model="form.salesOrganization" />
        </p-form-model-item>
        <p-button type="primary" class="btn-search" @click="getList">
          搜索
        </p-button>
        <p-button @click="reset">重置</p-button>
      </p-form-model>
      <!-- <p-button type="primary" @click="addModel">新增机种</p-button> -->
      <p-table
        class="table-list-container"
        row-key="id"
        :columns="columns"
        bordered
        :scroll="{ x: 1400, y: 300 }"
        :data-source="dataSource"
        :pagination="paginationMixin"
        :row-selection="rowSelectionMixin"
        @change="handleTableChange"
      >
        <a
          slot="modelNumber"
          slot-scope="text"
          @click="handleNumberClick(text)"
        >
          {{ text }}
        </a>
      </p-table>
    </div>
  </p-modal>
</template>

<script>
import { postModelList } from '@/api/modelInformation.js';
import mixinTable from '@/mixins/mixin-table.js';

const defaultForm = {
  modelNumber: '',
  modelName: '',
  salesOrganization: '',
};
export default {
  mixins: [mixinTable],
  props: {
    getContainer: {
      type: Function,
      default: () => document.body,
    },
    title: {
      type: String,
      default: '查询机种',
    },
    value: {
      type: [String, Number],
      default: undefined,
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dataSource: [],
      form: {
        ...defaultForm,
      },
      columnKey: undefined,
      asc: undefined,
    };
  },
  computed: {
    orgOptions() {
      return this.$store.getters.getOrg({
        code: 'ltcsmsizebu',
        isDict: true,
      });
    },
    OrganizationInfo() {
      return this.$store.getters.getOrg({
        code: 'ltcsmsizebu',
        isDict: false,
      });
    },
    provisionalOptions() {
      return {
        0: '否',
        1: '是',
      };
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '机种编号',
          dataIndex: 'modelNumber',
          scopedSlots: { customRender: 'modelNumber' },
        },
        {
          align: 'center',
          title: '机种名称',
          width: 150,
          dataIndex: 'modelName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '是否为临时机种',
          dataIndex: 'provisional',
          customRender: (text) => this.provisionalOptions[text],
        },
        {
          align: 'center',
          title: '销售组织',
          dataIndex: 'salesOrganization',
          ellipsis: true,
          customRender: (text) => this.orgOptions[text],
        },
        {
          align: 'center',
          title: '尺寸',
          dataIndex: 'size',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '分辨率',
          dataIndex: 'resolution',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '技术别',
          dataIndex: 'technology',
          ellipsis: true,
        },
        {
          align: 'center',
          title: 'Bonding方式',
          dataIndex: 'bonding',
          ellipsis: true,
        },
        {
          align: 'center',
          title: 'Notch方式',
          dataIndex: 'notch',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '刷新率',
          dataIndex: 'refreshRate',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建人',
          dataIndex: 'createUserName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建时间',
          width: 160,
          dataIndex: 'createTime',
          ellipsis: true,
        },
      ];
      return columns;
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getList();
        }
      },
    },
  },
  created() {
    this.rowSelectionMixin = { ...this.rowSelectionMixin, type: 'radio' };
  },
  methods: {
    handleTableChange(page, filters, sorter, { currentDataSource }) {
      this.asc = sorter.order === 'ascend' ? true : false;
      this.columnKey = sorter.columnKey;
      this.paginationMixin = page;
      this.getList();
    },

    async getList() {
      //搜索 触发
      const res = await postModelList({
        ...this.form,
        asc: this.asc,
        column: this.columnKey,
        current: this.paginationMixin.current,
        pageSize: this.paginationMixin.pageSize,
      });
      this.dataSource = res?.data?.data?.records;
      this.paginationMixin.total = res?.data?.data?.total;
    },
    reset() {
      this.form = { ...defaultForm };
      this.paginationMixin.current = 1;
      this.paginationMixin.pageSize = 10;
      this.rowSelectionMixin.selectedRowKeys = [];
      this.getList();
    },
    handleSearch() {
      this.visible = true;
    },
    handleCancel() {
      this.rowSelectionMixin.selectedRowKeys = [];
      this.$emit('update:visible', false);
      this.$emit('cancel', false);
    },
    handleOk() {
      const keys = this.rowSelectionMixin.selectedRowKeys;
      if (!keys.length) {
        this.$message.error('请选择机种！');
        return;
      }
      const current = this.dataSource.find((item) => item.id === keys[0]);
      this.$emit(
        'change',
        {
          key: current.modelNumber,
          label: current.modelName,
        },
        current.modelCutRate
      );
      this.handleCancel();
    },
    handleNumberClick(text) {
      const route = this.$router.resolve({
        path: '/model-info',
        query: {
          id: text,
        },
      });
      window.open(route.href, '_blank');
    },
  },
};
</script>

<style lang="less" scoped>
.content-container {
  width: 100%;
  display: flex;
  align-items: center;
  .content {
    display: flex;
    justify-content: center;
    flex: 1;
  }
}
.table-list-container {
  margin-top: 20px;
  height: 390px !important;
}

.poros-form {
  box-sizing: border-box;
  background-color: #f7f7f8;
  padding: 10px;
  padding-bottom: 0px;
  width: 100%;
}
.poros-form-item {
  width: 25%;
  margin-bottom: 10px;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 70px);
}
.btn-search {
  margin-right: 16px;
}
.messageMaskContent-connect {
  width: 100%;
  height: 540px !important;
  overflow: auto;
}
.foot-connect {
  display: flex;
  justify-content: center;
  height: 35px;
  width: 100%;
}
</style>
